/* * @Author: silas * @Date: 2020-11-24 10:32:13 * @Last Modified by: silas *
@Last Modified time: 2020-11-24 10:35:11 */

<template>
  <div class="core">
    <div class="header">
      <h3 class="title">核心平台分期</h3>
    </div>
    <div>
      <el-form :inline="true" :model="form">
        <el-form-item label="区域">
          <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
        </el-form-item>
        <el-form-item label="年份">
          <el-date-picker size="mini" v-model="form.year" value-format="yyyy" placeholder="选择年" type="year" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="指标">
          <el-select v-model="form.target">
            <el-option v-for="it in target" :key="it.value" :label="it.label" :value="it.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户群">
          <el-select v-model="form.coustomer">
            <el-option v-for="it in coustomer" :key="it.value" :label="it.label" :value="it.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="存增量">
          <el-select v-model="form.type">
            <el-option v-for="it in coustomerType" :key="it.value" :label="it.label" :value="it.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" type="primary" @click="handleSearch()">查询</el-button>
          <el-button size="mini" id="export_btn" @click="handleExport()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--  :span-method="arraySpanMethod" -->
    <div class="table">
      <el-table
        :header-cell-style="{
                    background: '#eef1f6',
                    textAlign: 'center'
                }"
        :cell-style="{ textAlign: 'center' }"
        :data="tableData"
        border
        style="width: 100%"
        v-loading="tableLoading"
        height="450"
        size="mini"
      >
        <el-table-column label="区域" prop="area_NAME" min-width="180" fixed></el-table-column>
        <el-table-column min-width="120" label="上级区域" prop="p_AREA_NAME" fixed></el-table-column>
        <!-- <el-table-column
                    min-width="120"
                    label="核心平台收入"
                    prop="vertical_INDEX_NAME"
                    fixed
        ></el-table-column>-->
        <!-- <el-table-column min-width="120" label="客户群" prop="cust_FLG">
        </el-table-column>-->
        <!-- <el-table-column
                    min-width="120"
                    label="客户类型"
                    prop="cust_TYPE_NEW"
                >
        </el-table-column>-->
        <el-table-column min-width="130" :label="it + '月'" v-for="(it, i) in titleData" :key="i" :prop="'value' + it">
          <template slot-scope="scope">
            {{
            showRate
            ? scope.row["value" + (i + 1)] + "%"
            : (scope.row["value" + (i + 1)] / 10000).toFixed(2)
            }}
          </template>
        </el-table-column>
        <el-table-column label="排名">
          <template slot-scope="scope">
            {{
            scope.$index == 0 ? '' : scope.$index
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from '@/api';
import { mergeSpan } from '@/utils/mixin';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
import { setSessionStorage, getSessionStorage, removeSessionStorage } from '@/common/js/storage';
export default {
    data() {
        var d = new Date(),
            t = d.getFullYear().toString();

        return {
            accountInfo: JSON.parse(getSessionStorage('accountInfo')),
            form: {
                areaId: '',
                coustomer: '',
                year: t,
                type: '',
                target: ''
            },
            target: [
                {
                    label: '月核心平台收入',
                    value: 'HX001'
                },
                {
                    label: '环比增长额',
                    value: 'HX002'
                },
                {
                    label: '环比增长率',
                    value: 'HX003'
                },
                {
                    label: '同比增长额',
                    value: 'HX004'
                },
                {
                    label: '同比增长率',
                    value: 'HX005'
                }
                // {
                //     label: "上年同期累计",
                //     value: "HX006"
                // }
            ],
            coustomer: [
                {
                    label: '全部',
                    value: '全部'
                },
                {
                    label: '公众',
                    value: '公众'
                },
                {
                    label: '政企',
                    value: '政企'
                }
            ],
            coustomerType: [
                {
                    label: '全部',
                    value: '全部'
                },
                {
                    label: '存存量',
                    value: '存存量'
                },
                {
                    label: '存增量',
                    value: '存增量'
                },
                {
                    label: '新增客户',
                    value: '新增客户'
                }
            ],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            tableData: [],
            tableLoading: false,
            titleData: Array.from(new Array(12), (item, value) => {
                return (value = value + 1);
            }),
            spanArr: null,
            disabledTime: '',
            showRate: false
        };
    },
    mounted() {
        var that = this;

        that.form.areaId = that.accountInfo.areaId;
        that.form.target = 'HX001';
        that.form.coustomer = '全部';
        that.form.type = '全部';

        that.getData(that.form);
    },
    methods: {
        getData(obj) {
            var that = this;

            that.tableLoading = true;
            $budgetAPI.getCoreStages(
                {
                    acct_month: obj.year,
                    AREA_ID: obj.areaId,
                    CUST_FLG: obj.coustomer,
                    CUST_TYPE_NEW: obj.type,
                    BUSI_CODE: obj.target
                },
                res => {
                    that.tableLoading = false;
                    if (res && res.code == 0) {
                        // that.spanArr = mergeSpan(res.content.data, [
                        //     "area_NAME",
                        //     "p_AREA_NAME",
                        //     "vertical_INDEX_NAME"
                        // ]);
                        var m = new Date().getMonth();

                        let data = res.content.data.sort((a, b) => {
                            return b['value' + m] - a['value' + m];
                        });
                        // var aa = new Array(12);
                        // if (!that.showRate) {
                        //     data.map(it => {
                        //         aa.map((item, i) => {
                        //             console.log( it["value" + (i + 1)], i)
                        //             // it["value" + (i + 1)] = (
                        //             //     it["value" + (i + 1)] / 10000
                        //             // ).toFixed(2);
                        //         });
                        //     });
                        // }

                        that.tableData = data;
                        console.log(res);
                    }
                }
            );
        },
        handleSearch() {
            var that = this;

            that.showRate = that.form.target == 'HX003' || that.form.target == 'HX005' ? true : false;
            that.getData(that.form);
        },
        handleExport() {
            let that = this;
            let name = '核心平台分期';
            let fields = {
                area_NAME: '区域(C4/C5/C6/C7)',
                p_AREA_NAME: '上级区域',
                vertical_INDEX_NAME: '核心平台收入',
                cust_TYPE_NEW: '客户类型',
                cust_FLG: '客户群',
                value1: '1月',
                value2: '2月',
                value3: '3月',
                value4: '4月',
                value5: '5月',
                value6: '6月',
                value7: '7月',
                value8: '8月',
                value9: '9月',
                value10: '10月',
                value11: '11月',
                value12: '12月'
            };
            that.loading = that.$loading({
                lock: true,
                text: '导出中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            let data = that.tableData;
            data.forEach(item => {
                for (let i in item) {
                    if (fields.hasOwnProperty(i)) {
                        item[fields[i]] = item[i];
                    }
                    delete item[i]; //删除原先的对象属性
                }
            });
            let workbook = XLSX.utils.book_new();
            let ws = XLSX.utils.json_to_sheet(data, {
                header: Object.values(fields)
            });
            XLSX.utils.book_append_sheet(workbook, ws, name);
            let wbOut = XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbOut], {
                        type: 'application/octet-stream'
                    }),
                    name + '.xlsx' //Demo.xlsx为导出的表格的名称
                );
                that.loading.close();
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbOut);
            }
            // return wbOut;
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
                return this.spanArr[rowIndex][columnIndex];
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.core {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        .title {
            font-weight: bold;
            font-size: 15px;
        }
    }
}
#search_btn {
    background-color: #2a90de;
}
#export_btn {
    background-color: #2cd531;
    color: #fff;
}
</style>
